document.addEventListener('DOMContentLoaded', function() {
    const decreaseButtons = document.querySelectorAll('.decrease');
    const increaseButtons = document.querySelectorAll('.increase');
    const quantityValues = document.querySelectorAll('.quantity-value');
    const itemTotals = document.querySelectorAll('.item-subtotal');
    const selectAllCheckbox = document.getElementById('select-all');
    const selectAllFooterCheckbox = document.getElementById('select-all-footer');
    const selectItems = document.querySelectorAll('.select-item');
    const removeSelectedButton = document.querySelector('.remove-selected');
    const totalPriceElement = document.querySelector('.total-price');
    let totalPrice = 0;

    decreaseButtons.forEach(button => {
        button.addEventListener('click', function() {
            const quantityInput = this.nextElementSibling;
            let quantity = parseInt(quantityInput.textContent, 10);
            if (quantity > 1) {
                quantity--;
                quantityInput.textContent = quantity;
                updateItemTotal(this.closest('.cart-item'));
                updateTotal();
            }
        });
    });

    increaseButtons.forEach(button => {
        button.addEventListener('click', function() {
            const quantityInput = this.previousElementSibling;
            let quantity = parseInt(quantityInput.textContent, 10);
            quantity++;
            quantityInput.textContent = quantity;
            updateItemTotal(this.closest('.cart-item'));
            updateTotal();
        });
    });

    selectItems.forEach(item => {
        item.addEventListener('change', function() {
            updateTotal();
            updateSelectAllCheckbox();
        });
    });

    selectAllCheckbox.addEventListener('change', function() {
        const isChecked = this.checked;
        selectItems.forEach(item => {
            item.checked = isChecked;
            updateItemTotal(item.closest('.cart-item'));
        });
        updateTotal();
    });

    selectAllFooterCheckbox.addEventListener('change', function() {
        const isChecked = this.checked;
        selectItems.forEach(item => {
            item.checked = isChecked;
            updateItemTotal(item.closest('.cart-item'));
        });
        updateTotal();
    });

    removeSelectedButton.addEventListener('click', function() {
        selectItems.forEach((item, index) => {
            if (item.checked) {
                document.querySelector('.cart-item')[index].remove();
            }
        });
        updateTotal();
        updateSelectAllCheckbox();
    });

    function updateItemTotal(cartItem) {
        const priceElement = cartItem.querySelector('.current-price');
        const quantityElement = cartItem.querySelector('.quantity-value');
        const subtotalElement = cartItem.querySelector('.item-subtotal');
        const price = parseFloat(priceElement.textContent.replace('¥', ''));
        const quantity = parseInt(quantityElement.textContent, 10);
        const subtotal = price * quantity;
        subtotalElement.textContent = '¥' + subtotal.toFixed(2);
    }

    function updateTotal() {
        let currentTotal = 0;
        itemTotals.forEach((total, index) => {
            if (selectItems[index].checked) {
                currentTotal += parseFloat(total.textContent.replace('¥', ''));
            }
        });
        totalPriceElement.textContent = '¥' + currentTotal.toFixed(2);
    }

    function updateSelectAllCheckbox() {
        const allChecked = Array.from(selectItems).every(item => item.checked);
        selectAllCheckbox.checked = allChecked;
        selectAllFooterCheckbox.checked = allChecked;
    }

    // 初始化每个商品的小计
    document.querySelectorAll('.cart-item').forEach(item => {
        updateItemTotal(item);
    });

    updateSelectAllCheckbox();
    updateTotal();
});




document.addEventListener("DOMContentLoaded", function () {
    const uls = document.querySelectorAll(".thing-main ul");
    const btnLeft = document.querySelector(".btnleft");
    const btnRight = document.querySelector(".btnright");
    let currentIndex = 0;

    function showCurrentUl() {
        uls.forEach((ul, index) => {
            if (index === currentIndex) {
                ul.classList.add("active"); // 显示当前 ul
            } else {
                ul.classList.remove("active"); // 隐藏其他 ul
            }
        });
    }

    // 初始化时只显示第一个 ul
    showCurrentUl();

    // 左按钮点击事件
    btnLeft.addEventListener("click", () => {
        currentIndex = (currentIndex - 1 + uls.length) % uls.length; // 循环到前一个
        showCurrentUl();
    });

    // 右按钮点击事件
    btnRight.addEventListener("click", () => {
        currentIndex = (currentIndex + 1) % uls.length; // 循环到下一个
        showCurrentUl();
    });
});